<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0 auto;
            text-align: center;
        }

        #tip {
            width: 200px;
            height: 140px;
            line-height: 140px;
            background-color: beige;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="tip"></div>
    <span>10s后自动抛出下载</span>
    <br>
    <span>php+node.js实现耗时任务处理</span>
    <br>
    <a href="javascript:void(0);" id="export_excel">导出Excel</a>

    <!-- js下载文件到本地的各种方法总结
    https://blog.csdn.net/zhongmushu/article/details/90343986 -->

    <script src="/static/js/socket.io.js"></script>
    <script src="/static/js/jquery-2.0.2.min.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script>
        //登录获取jwt
        function auth() {
            var token = $.cookie('auth');
            if (token) return token;
            $.ajaxSetup({
                async: false
            });
            $.get('/index/websocket/login', { username: 'admin', password: 'admin' }, function (data) {
                token = data.token;
            }, 'json');
            $.ajaxSetup({
                async: true
            });
            $.cookie('auth', token);
            return token;
        }

        var ws = io('ws://nc.com', { query: "token=" + auth() });
        ws.on('connect', function (e) {
            console.log("连接服务器成功");
        });
        ws.on('disconnect', function () {
            console.log("disconnect");
            clearInterval(window.ttl);
        });
        ws.on('communication', function (data) {
            console.log('get:', data);
        });
        //每隔50秒ping一次
        window.ttl = setInterval(function () {
            ws.emit('communication', { controller: 'websocket', action: 'ping' });
        }, 50000);
        //callback
        function cb_download(url) {
            //alert(url);
            console.log(url);
            document.getElementById('down').src = url;

            document.getElementById('tip').innerHTML = '下载成功。';
            document.getElementById('export_excel').innerHTML = '下载成功。';
            setTimeout(function () {
                document.getElementById('tip').innerHTML = '';
                document.getElementById('export_excel').innerHTML = '导出Excel';
            }, 1000);
        }
        //再绑定一个communication
        ws.on('communication', function (data) {
            if (typeof data.callback != 'undefined') {
                try {
                    window[data.callback](data.url);
                } catch (e) {
                    console.log(e);
                }

            }
        });
        document.getElementById('export_excel').onclick = function () {
            document.getElementById('tip').innerHTML = '下载请求中...';
            document.getElementById('export_excel').innerHTML = '下载请求中...';
            ws.emit('communication', {
                controller: 'excel',
                action: 'export',
                catid: 100,
                kw: '充值',
                callback: 'cb_download',
            });
        }
    </script>
    <iframe id="down" src="" frameborder="0" style="display:none"></iframe>
</body>

</html>